<template>
    <Modal
        :value="showModal"
        title="修改密码"
        class-name="changepwd-dialog"
        @on-cancel="handleCancel">
        <Form ref="form" :model="form" :rules="ruleValidate" :label-width="80">
            <FormItem label="旧密码" prop="oldPwd">
                <Input type="password" v-model="form.oldPwd" placeholder="请输入旧密码"></Input>
            </FormItem>
            <FormItem label="新密码" prop="newPwd">
                <Input type="password" v-model="form.newPwd" placeholder="请输入新密码"></Input>
            </FormItem>
            <FormItem label="确认密码" prop="confirmPwd">
                <Input type="password" v-model="form.confirmPwd" placeholder="请确认新密码"></Input>
            </FormItem>         
        </Form>
        <div slot="footer">
            <Button type="primary" @click="handleSubmit('form')">提交</Button>
            <Button type="text" @click="handleCancel">取消</Button>
        </div>
    </Modal>
</template>

<script>
import { mapGetters } from 'vuex'
import { changeUserPwdRest } from '@/common/apis/system'

export default {
    name: 'changePassword',
    props: ['showModal'],
    data() {
        const validatePass = (rule, value, callback) => {
            if(value) {
                if (this.form.newPwd !== '') {
                    this.$refs.form.validateField('confirmPwd')
                } 
                callback()
            }
        }
        const validatePassCheck = (rule, value, callback) => {
            if (value && value !== this.form.newPwd) {
                callback(new Error('确认密码与新密码不一致'))
            } else {
                callback()
            }
        }
        return {
            form: {
                oldPwd: '',
                newPwd: '',
                confirmPwd: ''
            },
            ruleValidate: {
                oldPwd: [
                    { required: true, message: '旧密码不能为空', trigger: 'blur' }
                ],
                newPwd: [
                    { required: true, message: '新密码不能为空', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
                confirmPwd: [
                    { required: true, message: '确认密码不能为空', trigger: 'blur' },
                    { validator: validatePassCheck, trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    const { oldPwd, newPwd } = this.form
                    const params = {
                        oldPwd,
                        newPwd,
                        userId: this.userInfo.userId
                    }
                    changeUserPwdRest(params).then(result => {
                        if (result.data.code === 200) {
                            this.handleCancel()
                            this.$router.push('/login')
                        } else {
                            this.handleReset()
                            this.$Message.error({
                                background: true,
                                content: result.data.msg
                            })
                        }
                    })
                }
            })
        },
        handleCancel() {
            this.handleReset()
            this.$emit('closeModal')
        },
        handleReset() {
            this.$refs.form.resetFields()
        }
    }
}
</script>
